<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>南声-分享源于热爱</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2673097_48rfn6lutg4.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <!-- header -->
        <header>
            <div class="headerInfo">
                <ul class="listLeft">
                    <li><a href="javascript:;"><img
                                src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/dcec27cc6ece0eb5bb217e62e6bec104.svg"
                                alt=""></a></li>
                    <li><a class="active" href="javascript:;">首页</a></li>
                    <li><a href="javascript:;">沸点</a></li>
                    <li><a href="javascript:;">资讯</a></li>
                    <li><a href="javascript:;">小册</a></li>
                    <li><a href="javascript:;">活动</a></li>
                    <li><a href="javascript:;">开发者大会</a></li>
                    <li><input type="text" placeholder="搜索"></li>
                </ul>
                <ul class="listRight">
                    <!-- <li><input type="text" placeholder="搜索"></li> -->
                    <li><a class="devCenter" href="javascript:;">创作者中心</a></li>
                    <li v-if="loginer == null"><a class="write" href="javascript:;" @click="goLoginPage">写文章 <i
                                class="iconfont icon-caret-down"></i></a></li>
                    <li v-if="loginer == null"><a class="loginBtn" href="./login.html">登录</a></li>
                    <li v-else class="userfaceLi" @mouseover="showSub = true" @mouseleave="showSub = false">
                        <a class="userface" href="javascript:;">
                            <!-- <img src="" alt=""> --> {{loginer.nickname.substr(0,1)}}
                        </a>
                        <div class="subMenu" v-show="showSub">
                            <div><a href="./personal.html">个人中心</a></div>
                            <div><a href="./publish.html">写文章</a></div>
                            <div><a id="logoutBtn" href="javascript:;" @click="logout">退出登录</a></div>
                        </div>
                    </li>
                </ul>
            </div>
        </header>
        <!-- nav -->
        <nav>
            <ul>
                <li><a class="active" href="javascript:;">推荐</a></li>
                <li :key="item.id" v-for="(item,index) in categoryies"><a href="javascript:;" v-html="item.cname"></a>
                </li>
            </ul>
        </nav>
        <!-- content -->
        <div class="content">
            <div class="articleList">
                <ul class="articleListHeader">
                    <li><a @click="initArticles(3)" class="active" href="javascript:;">热门</a></li>
                    <li><a @click="initArticles(2)" href="javascript:;">最新</a></li>
                    <li><a @click="initArticles(1)" href="javascript:;">热榜</a></li>
                </ul>
                <!-- 文章列表 -->
                <ul class="articleListContent">
                    <li :key="article.id" @click="showArticleDetail(article.id)" v-for="(article,index) in articleIndex">
                        <div class="contentInfo">
                            <!-- 文章作者信息 -->
                            <div>
                                <a class="hoverInfo" href="javascript:;" @click.stop="showAuthor(article.author.id)">{{article.author.nickname}}</a>
                                <a href="javascript:;">{{article.publishTime}}</a>
                                <a class="hoverInfo" href="javascript:;">{{article.category.cname}}</a>
                                <!-- ·
                                <a class="hoverInfo" href="javascript:;">JavaScript</a> -->
                            </div>
                            <!-- 文章标题 -->
                            <h4>{{article.title}}</h4>
                            <!-- 文章内容介绍 -->
                            <div>
                                <a href="javascript:;">{{article.hmContent}}...</a>
                            </div>
                            <!-- 文章浏览点赞信息 -->
                            <div class="viewInfos">
                                <i class="iconfont icon-eye"> {{article.views}}</i>
                                <i class="iconfont icon-zan hoverInfo"> {{article.giveLike}}</i>
                                <!-- <i class="iconfont icon-message hoverInfo"> 41</i> -->
                            </div>
                        </div>
                        <div class="contentImg">
                            <img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d5367ba25a0a4092bcf821a8f2b88212~tplv-k3u1fbpfcp-zoom-mark-crop-v2:0:0:360:240.awebp"
                                alt="">
                        </div>
                    </li>
                </ul>
            </div>
            <div class="infoList">
                <div>
                    <div>
                        <i style="color: #fc3;" class="iconfont icon-calendar"> 早上好！</i>
                        <a href="javascript:;">去签到</a>
                    </div>
                    <div class="signInfo">
                        连续签到赢掘金惊喜好礼
                    </div>
                </div>
                <div>
                    <h5>掘金 - juejin.cn</h5>
                    <div class="desc">一个帮助开发者成长的社区</div>
                    <div>
                        <select>
                            <option value="">+86</option>
                            <option class="a" value="">中国澳门&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;+853
                            </option>
                            <option value="">中国台湾&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;+886</option>
                            <option value="">中国香港&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;+891</option>
                        </select><input class="mobile" type="number" placeholder="请输入手机号">
                    </div>
                    <div class="checkCode">
                        <input type="text" maxlength="4" placeholder="验证码">
                        <a href="javascript:;">获取验证码</a>
                    </div>
                    <div>
                        <a class="loginSoon" href="javascript:;">立即登录</a>
                    </div>
                    <div class="license">
                        <span>注册登录即表示</span><br>
                        <span>同意</span>
                        <a href="javascript:;">用户协议</a>
                        <span>、</span>
                        <a href="javascript:;">隐私政策</a>
                    </div>
                </div>
            </div>
        </div>
        <div style="width: 960px;margin: 5px auto;color: #fff !important;">
            <el-pagination 
                @current-change="currentChange"
                background layout="prev, pager, next" 
                :total="total" 
                :page-size="pageSize" 
                :current-page="pageNum">
            </el-pagination>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./js/api.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                listId: 1,
                total: 0,
                articleIndex: [],
                pageNum: 1,
                pageSize: 3,
                categoryies: [],
                loginer: JSON.parse(window.sessionStorage.getItem('loginer')),
                showSub: false
            },
            methods: {
                showAuthor(authorId){
                    window.location.href="./personal.html?authorId="+authorId;
                },
                showArticleDetail(id){
                    window.location.href="./details.html?id="+id;
                },
                initNewArticles(){ // 查询文章
                    getRequest('http://localhost:8080/article/index?listId=' + this.listId + '&pageNum=' + this.pageNum + '&pageSize=' + this.pageSize).then(resp => {
                        if (resp.data) {
                            this.articleIndex = resp.data.list;
                            this.total = resp.data.total;
                        }
                    })
                },
                currentChange(pageNum){ // 切换页码
                    this.pageNum = pageNum;
                    this.initNewArticles();
                },
                initArticles(listId) { // 查询文章
                    if (listId) {
                        this.listId = listId;
                    }
                    this.pageNum = 1;
                    this.initNewArticles();
                },
                initCategories() { // 查询文章类别
                    getRequest('http://localhost:8080/category/list').then(resp => {
                        if (resp.data) {
                            this.categoryies = resp.data;
                        }
                    })
                },
                goLoginPage() { // 去登录页
                    window.location.href = './login.html';
                },
                logout() { // 用户退出
                    if (confirm('是否确定退出')) {
                        getRequest('http://localhost:8080/user/logout').then(resp => {
                            if (resp.data) {
                                alert(resp.data.msg);
                                window.sessionStorage.removeItem('loginer');
                                window.location.reload();
                            }
                        })
                    }
                }
            },
            mounted() {
                this.initCategories();
                this.initArticles();
            }
        })
    </script>
</body>

</html>